
// 简写形式
// export default () => {
//   return <div>user 页面</div>;
// };

import React, { useState, FC } from 'react';
import { Table, Space, Popconfirm, Button} from 'antd';
import moment from 'moment';

// UserListDataType是在model里面定义暴露的, 是可以引入的
import {connect, Dispatch, Loading, Router, UserListDataType} from 'umi';

// SingleUserInfoType是单独抽离出来的
import {SingleUserInfoType, FormValuesType} from './data';

import CustomModalForUsers from './components/CustomModalForUsers';


interface UserPageProps{
  usersArr: SingleUserInfoType[];
  dispatch: Dispatch;
  loadingStatus: boolean;
}


const UserListPage: FC<UserPageProps> = ({ usersArr, dispatch, loadingStatus }) => {

  const columns: any = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      render: (text: string) => <span>{ moment(text).format('YYYY-MM-DD HH:mm:ss') }</span>
    },
    {
      title: '操作',
      key: 'action',
      render: (text: string, record: SingleUserInfoType) => (
        <Space size="middle">
          <a onClick={ () => handleEditOrEditInfo(record, 'edit') }>编辑（姓名：{record.name}）</a>

          <Popconfirm
            title="你确定删除吗？"
            onConfirm={confirmDelete}
            okText="确定"
            cancelText="取消"
          >
            <a onClick={ () => handleEditOrEditInfo(record, 'del')} >删除</a>
          </Popconfirm>

          <a onClick={ () => setIsModalVisible(true) }>测试一下</a>

        </Space>
      ),
    },
  ];

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [userInfo, setUserInfo] = useState<SingleUserInfoType | any>({});


  const handleEditOrEditInfo = (record: SingleUserInfoType, keyWord: string) => {
    if(keyWord === 'edit'){
      setIsModalVisible(true);
      setUserInfo(record);
    } else {
      setUserInfo(record);
    }
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    setUserInfo({});
  };


  const handleFinish = (values: FormValuesType) => {
    console.log('Success: 收集到子组件的表单数据', values);
    const id = userInfo.id;
    if(id){
      dispatch({
        type: 'userListDemo/editUpdateInfo',
        payload: {
          values,
          id
        }
      });
    } else {
      dispatch({
        type: 'userListDemo/addUserInfo',
        payload: {
          values
        }
      })
    }

    setIsModalVisible(false);
  };


  const confirmDelete = () => {
    if(userInfo.id){
      dispatch({
        type: 'userListDemo/deleteUserInfo',
        payload: {
          id: userInfo.id ,
        }
      })
    }

  };


  const handleAddUser = () => {
    setUserInfo({});
    setIsModalVisible(true);
  };


  return (
    <div className='list-table'>

      <Button type='primary'
              ghost style={{marginBottom: 20}}
              onClick={handleAddUser}
      > 添加用户</Button>

      <Table
        columns={columns}
        dataSource={usersArr}
        rowKey={record => record.id}
        loading={loadingStatus}
      />
      <CustomModalForUsers
        isVisible={isModalVisible}
        clickCancel={handleCancel}
        handleFinish={handleFinish}
        info={userInfo}
      />



    </div>
  )
};



// 注： 这里是namespace
const mapStateToProps = ({userListDemo, loading, router}: {userListDemo: any, loading: Loading, router: Router}) => {
  // console.log('参数', val);
  // console.log('namespace命名', userListDemo, loading, router);
  return {
    usersArr: userListDemo.data,
    loadingStatus: loading.models.userListDemo,
    router,
  }
};


export default connect(mapStateToProps)(UserListPage);



/*
// 简写形式
export default connect(({userListDemo, loading, router})=> ({
  users: userListDemo.data,
  loading,
  router,
}))(UserListPage);

*/
